<!-- 店铺 -->
<template>
    <div class="page has-navbar has-tabbar store" v-tabbar-menu-index="1">
        <von-header theme="light">
            <span slot="title">关注店铺</span>
        </von-header>
        <div class="page-content">
            <div class="bar bar-header item-input-inset">
                <label class="item-input-wrapper"><i class="icon ion-ios-search placeholder-icon"></i>
                    <form action="javascript:;" @submit="onSearch" id="von-search-8xz">
                        <input type="search" placeholder="输入关键字" @blur="onSearch" v-model="keywords">
                    </form>
                </label>
                <button type="button" class="button button-clear button-positive" @click="onCancel">Cancel</button>
            </div>
            <div class="searchBox" v-if="searchList[0]" @click="onCancel">
                <item v-for="(item, index) in searchList" :key="index" @click.native="selectStore(item.storeId)" class="searchItem">
                    <div v-text="item.storeName+'-'+item.addr"></div>
                </item>
            </div>
            <scroll class="storeList"
                    :on-infinite="onInfinite">
                <item v-for="(item, index) in storeList" :key="index" @click.native="onItemClick(item.storeId)" class="storeItem" :class="{'item-stable': index % 2 == 0}">
                    <div class="name" v-text="item.storeName+'（'+item.addr+'）'"></div>
                    <div class="point" v-text="'积分：'+item.points"></div>
                    <div class="price" v-text="'余额：￥'+item.totalAmount"></div>
                </item>

                <div v-if="!haveMore" slot="infinite" class="text-center">没有更多数据</div>
            </scroll>
        </div>
    </div>
</template>
<script>
export default {
    props: ['openId'],
    data(){
        return {
            storeList:[],

            searchList: [],
            keywords: '',
            searching: false,

            haveMore: true,
            pageSize: 20,
            curPage: 0,
        }
    },
    methods: {
        onInfinite: function (done) {
            this.curPage++;
            this.$http.get(this.openId+'/stores-info?page='+this.curPage+'&size='+this.pageSize).then((res)=>{
                if ( !res.data[0] ) {
                    this.haveMore = false;
                    this.curPage--;
                    done();
                    return;
                }
                this.storeList = this.storeList.concat(res.data);
                done();
            }).catch(()=>{

            })
        },
        onItemClick: function ( storeId ) {
            // let url = 'https://wechat-order.huoxingy.com/?openId='+this.openId+'&storeId='+storeId;
            // window.location.href = url;
        },
        selectStore: function ( storeId ) {
            this.$http.post('/add-store',{
                openId : this.openId,
                storeId : storeId
            }).then((res)=>{
                this.searchList = [];
                this.curPage = 0;
                this.storeList = [];
                this.haveMore = true;
                this.searchList = [];
                this.keywords = '';
                $toast.show('关注店铺成功', 2000).then(() => {})
                this.$http.get(this.openId+'/stores-info?page='+this.curPage+'&size='+this.pageSize).then((res)=>{
                    this.storeList = res.data;
                    if ( res.data.length < this.pageSize ) {
                        this.haveMore = false;
                    }
                }).catch(()=>{

                })
            })
        },
        onSearch() {
            this.keywords = this.keywords.replace(/\s+/g, "");
            if ( !this.keywords ) {
                return;
            }
            this.$http.get('stores?q='+encodeURI(this.keywords)).then((res)=>{
                this.searchList = res.data;
                if ( this.searchList[0] ) {
                    this.searching = true;
                } else {
                    $toast.show('无相关结果', 2000).then(() => {})
                }

                document.getElementsByTagName('input')[0].blur();
            }).catch(()=>{

            })
        },

        onCancel() {
            this.searching = false;
            this.searchList = [];
            this.keywords = '';
        }
    },
    created: function () {
        this.$http.get(this.openId+'/stores-info?page='+this.curPage+'&size='+this.pageSize).then((res)=>{
            this.storeList = res.data;
            if ( res.data.length < this.pageSize ) {
                this.haveMore = false;
            }
        }).catch(()=>{

        })
    },
    mounted(){

    },
}
</script>

<style lang="scss" scoped>
	@import "store";
</style>
